<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #wrap {
            width: 200px;
            margin: 100px auto;
            border: 1px solid #999;
        }
        ul,li {
            list-style-type: none;
        }
        .title {
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-indent: 5px;
            background-color: blueviolet;
            color: #fff;
            cursor: pointer;
            border-bottom: 1px dashed #eee;
        }
        .list{
            display: none;
        }
        .list.show {
            display: block;
        }
        .list li {
            width: 100%;
            height: 20px;
            line-height: 20px;
            font-size: 12px;
            border-bottom: 1px dashed #eee;
            text-indent: 20px;
            cursor: pointer;
        }
        .list li:hover {
            background-color: #eee;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div class="friend">
            <p class="title">同事</p>
            <ul class="list">
                <li>千寻</li>
                <li>阿飞</li>
                <li>诗涵</li>
                <li>小野猫</li>
            </ul>
        </div>
        <div class="friend">
            <p class="title">好友</p>
            <ul class="list">
                <li>烟花强</li>
                <li>光头强</li>
                <li>天道强</li>
                <li>傻强</li>
            </ul>
        </div>
        <div class="friend">
            <p class="title">VIP学员</p>
            <ul class="list">
                <li>哈哈哈</li>
                <li>当当当</li>
                <li>整起来</li>
                <li>啊啦搜不</li>
            </ul>
        </div>
    </div>

    <script>
        let aDiv = document.querySelectorAll(".friend"),
            aList = document.querySelectorAll(".list");
        
        let len = aDiv.length;

        for(let i=0;i<len;i++) {
            aDiv[i].onclick = function() {
                aList[i].className = "list show";
                
            };
        }

        /*
        h5 
        .classList
        */
    </script>
</body>
</html>